<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="标题" prop="title">
              <el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="活动标题" prop="activityTitle">
              <el-input v-model="queryParams.activityTitle" placeholder="请输入活动标题" clearable @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-input v-model="queryParams.city" placeholder="请输入城市" clearable @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
                       v-hasPermi="['app:SkYueJu:remove']">删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['app:SkYueJu:export']">
              导出
            </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="SkYueJuList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>

        <el-table-column type="expand" >
          <template #default="props">
            <el-descriptions
              class="margin-top"
              :column="4  "
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    活动标题
                  </div>
                </template>
                {{ props.row.activityTitle }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    活动地址
                  </div>
                </template>
                {{ props.row.activityAddress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item" style="width: 85px">
                    活动开始时间
                  </div>
                </template>
                {{ props.row.activityStartTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    活动结束时间
                  </div>
                </template>
                {{ props.row.activityEndTime }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    使用开始时间
                  </div>
                </template>
                {{ props.row.activityUseStartTime }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    使用结束时间
                  </div>
                </template>
                {{ props.row.activityUseEndTime }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    男生价格
                  </div>
                </template>
                {{ props.row.activityManPrice }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    女生价格
                  </div>
                </template>
                {{ props.row.activityWomanPrice }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <office-building/>
                    </el-icon>
                    活动规则
                  </div>
                </template>
                {{ props.row.activityManPrice }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="ID" align="center" prop="id" width="120" v-if="true"/>
        <el-table-column label="类型" align="center" prop="type"/>
        <el-table-column label="标题" align="center" prop="title" width="200"/>
        <el-table-column label="图片" align="center" prop="image" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.image" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center" prop="address" width="200"/>
        <el-table-column label="总" align="center" prop="allUserNumber"/>
        <el-table-column label="男" align="center" prop="manNumber">
          <template #default="scope">
            {{scope.row.manNumber==null?0:scope.row.manNumber}}
          </template>
        </el-table-column>
        <el-table-column label="女" align="center" prop="woman">
          <template #default="scope">
            {{scope.row.woman==null?0:scope.row.woman}}
          </template>
        </el-table-column>
        <el-table-column label="时间" align="center" prop="startTime" width="180">
          <template #default="scope">
            <div>{{scope.row.startTime}}-{{scope.row.endTime}}</div>
          </template>
        </el-table-column>
        <el-table-column label="是否结束" align="center" prop="startTime" width="180">
          <template #default="scope">
            <div>{{new Date(scope.row.endTime).valueOf()>new Date().valueOf()==true?'有效':'已结束'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="时长" align="center" prop="longTime"/>
        <el-table-column label="状态" align="center" prop="state">
          <template #default="scope">
            <el-tag v-if="scope.row.state==1" type="primary">已审核</el-tag>
            <el-tag v-if="scope.row.state==0" type="primary">已取消</el-tag>
            <el-tag v-if="scope.row.state==2" type="primary">未审核</el-tag>
            <el-tag v-if="scope.row.state==3" type="primary">审核拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="城市" align="center" prop="city"/>
        <el-table-column label="城市" align="center" prop="city" :formatter="querenCity"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template #default="scope">
            <el-tooltip content="约局信息" placement="top">
              <el-button link type="primary" icon="InfoFilled" @click="handleUpdate(scope.row)"
                         v-hasPermi="['app:SkYueJu:edit']"></el-button>
            </el-tooltip>

            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                         v-hasPermi="['app:SkYueJu:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize" @pagination="getList"/>
    </el-card>
    <!-- 添加或修改约局信息对话框 -->
<!--    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>-->
<!--      <el-form ref="SkYueJuFormRef"  :model="form" :rules="rules" label-width="80px">-->
<!--        是否确认取消【{{form.title}}】排队大厅推荐？-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <div class="dialog-footer">-->
<!--          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>-->
<!--          <el-button @click="cancel">取 消</el-button>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-dialog>-->


    <!-- 添加或修改约局信息对话框 -->
    <el-drawer :title="dialog.title" v-model="dialog.visible" size="60%" append-to-body>
      <el-descriptions title="约局信息">
        <el-descriptions-item label="标题">{{ form.title }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ form.type }}-{{ form.twoType }}</el-descriptions-item>
        <el-descriptions-item label="图片"></el-descriptions-item>
        <!--        0:取消  1：正常  2:待审核 3：审核拒绝-->
        <el-descriptions-item label="状态">
          <el-tag size="small" v-if="form.state==0">已取消</el-tag>
          <el-tag size="small" v-if="form.state==1">已通过</el-tag>
          <el-tag size="small" v-if="form.state==2">待审核</el-tag>
          <el-tag size="small" v-if="form.state==3">已拒绝</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="地址">
          {{ form.address }}
        </el-descriptions-item>
        <el-descriptions-item label="经度"> {{ form.longitude }}</el-descriptions-item>
        <el-descriptions-item label="纬度">{{ form.latitude }}</el-descriptions-item>
        <el-descriptions-item label="总人数">{{ form.allUserNumber }}</el-descriptions-item>
        <el-descriptions-item label="男生数">{{ form.manNumber == null ? 0 : form.manNumber }}</el-descriptions-item>
        <el-descriptions-item label="女生数">{{ form.woman == null ? 0 : form.woman }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ form.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ form.endTime }}</el-descriptions-item>
        <el-descriptions-item label="发布城市编码">{{ form.city }}</el-descriptions-item>
        <el-descriptions-item v-if="form.activityTitle" label="活动标题">{{ form.activityTitle }}</el-descriptions-item>
        <el-descriptions-item v-if="form.activityAddress" label="活动地址">{{ form.activityAddress }}</el-descriptions-item>
        <el-descriptions-item v-if="form.activityAddress" label="活动开始时间">{{ form.activityAddress }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.activityEndTime" label="活动结束时间">{{ form.activityEndTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.activityUseStartTime" label="使用开始时间">{{ form.activityUseStartTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.activityUseEndTime" label="使用结束时间">{{ form.activityUseEndTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.activityManPrice" label="男生价格">{{ form.activityManPrice }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.activityWomanPrice" label="女生价格">{{ form.activityWomanPrice }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.activityRule" label="活动规则">{{ form.activityRule }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="约局发布人信息" style="margin-top: 20px;margin-bottom: 20px">
        <el-descriptions-item label="用户ID">{{ userVo.id }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ userVo.nickName }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ userVo.phone }}</el-descriptions-item>
      </el-descriptions>

      <span style="font-weight: bold;margin-top: 40px;">约局参与人</span>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24">
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="createTime" label="申请时间"/>
            <el-table-column prop="userId" label="用户ID"/>
            <el-table-column prop="nickName" label="昵称"/>
            <el-table-column prop="phone" label="电话"/>
            <el-table-column prop="state" label="状态">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.state==1">已加入</el-tag>
                <el-tag type="info" v-if="scope.row.state==2">已拒绝</el-tag>
                <el-tag type="warning" v-if="scope.row.state==0">待审核</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup name="SkYueJu" lang="ts">
import {listSkYueJu, getSkYueJu, delSkYueJu, addSkYueJu, updateSkYueJu} from '@/api/app/SkYueJu';
import {SkYueJuVO, SkYueJuQuery, SkYueJuForm} from '@/api/app/SkYueJu/types';

const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import {cityList} from '@/api/app/city/city'
const cityListAll =  cityList;
const SkYueJuList = ref<SkYueJuVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const SkYueJuFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const userVo = ref({
  id: '',
  nickName: '',
  phone: ''
})
const list = ref([]);

const initFormData: SkYueJuForm = {
  id: undefined,
  type: undefined,
  title: undefined,
  content: undefined,
  image: undefined,
  address: undefined,
  longitude: undefined,
  latitude: undefined,
  allUserNumber: undefined,
  manNumber: undefined,
  woman: undefined,
  startTime: undefined,
  activityTitle: undefined,
  activityAddress: undefined,
  activityStartTime: undefined,
  activityEndTime: undefined,
  activityTradeTime: undefined,
  activityUseStartTime: undefined,
  activityUseEndTime: undefined,
  activityManPrice: undefined,
  activityWomanPrice: undefined,
  activityRule: undefined,
  state: undefined,
  city: undefined,

}
const data = reactive<PageData<SkYueJuForm, SkYueJuQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: undefined,
    title: undefined,
    content: undefined,
    image: undefined,
    address: undefined,
    longitude: undefined,
    latitude: undefined,
    allUserNumber: undefined,
    manNumber: undefined,
    woman: undefined,
    startTime: undefined,
    activityTitle: undefined,
    activityAddress: undefined,
    activityStartTime: undefined,
    activityEndTime: undefined,
    activityTradeTime: undefined,
    activityUseStartTime: undefined,
    activityUseEndTime: undefined,
    activityManPrice: undefined,
    activityWomanPrice: undefined,
    activityRule: undefined,
    state: undefined,
    city: undefined,
    isHall: undefined,
    params: {},
    sourse:undefined
  },
  rules: {
    id: [
      {required: true, message: "ID不能为空", trigger: "blur"}
    ],
    type: [
      {required: true, message: "类型不能为空", trigger: "change"}
    ],
    title: [
      {required: true, message: "标题不能为空", trigger: "blur"}
    ],
    content: [
      {required: true, message: "详细不能为空", trigger: "blur"}
    ],
    image: [
      {required: true, message: "图片不能为空", trigger: "blur"}
    ],
    address: [
      {required: true, message: "地址不能为空", trigger: "blur"}
    ],
    longitude: [
      {required: true, message: "经度不能为空", trigger: "blur"}
    ],
    latitude: [
      {required: true, message: "纬度不能为空", trigger: "blur"}
    ],
    allUserNumber: [
      {required: true, message: "总不能为空", trigger: "blur"}
    ],
    manNumber: [
      {required: true, message: "男不能为空", trigger: "blur"}
    ],
    woman: [
      {required: true, message: "女不能为空", trigger: "blur"}
    ],
    startTime: [
      {required: true, message: "开始时间不能为空", trigger: "blur"}
    ],
    activityTitle: [
      {required: true, message: "活动标题不能为空", trigger: "blur"}
    ],
    activityAddress: [
      {required: true, message: "活动地址不能为空", trigger: "blur"}
    ],
    activityStartTime: [
      {required: true, message: "活动开始时间不能为空", trigger: "blur"}
    ],
    activityEndTime: [
      {required: true, message: "活动结束时间不能为空", trigger: "blur"}
    ],
    activityTradeTime: [
      {required: true, message: "活动营业时间不能为空", trigger: "blur"}
    ],
    activityUseStartTime: [
      {required: true, message: "使用开始时间不能为空", trigger: "blur"}
    ],
    activityUseEndTime: [
      {required: true, message: "使用结束时间不能为空", trigger: "blur"}
    ],
    activityManPrice: [
      {required: true, message: "男生价格不能为空", trigger: "blur"}
    ],
    activityWomanPrice: [
      {required: true, message: "女生价格不能为空", trigger: "blur"}
    ],
    activityRule: [
      {required: true, message: "活动规则不能为空", trigger: "blur"}
    ],
    state: [
      {required: true, message: "不能为空", trigger: "blur"}
    ],
    city: [
      {required: true, message: "城市不能为空", trigger: "blur"}
    ]
  }
});

const {queryParams, form, rules} = toRefs(data);

/** 查询约局信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listSkYueJu(queryParams.value);
  SkYueJuList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  SkYueJuFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: SkYueJuVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加约局信息";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: SkYueJuVO) => {
  reset();
  loading.value = true
  const _id = row?.id || ids.value[0]
  const res = await getSkYueJu(_id);
  Object.assign(form.value, res.data);
  userVo.value = res.data.userVo
  list.value = res.data.list
  dialog.title = "约局信息详情";
  loading.value = false;
  dialog.visible = true;
}

/** 提交按钮 */
const submitForm = () => {
  SkYueJuFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateSkYueJu(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addSkYueJu(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: SkYueJuVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除约局信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delSkYueJu(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('app/SkYueJu/export', {
    ...queryParams.value
  }, `SkYueJu_${new Date().getTime()}.xlsx`)
}
const querenCity = (e) =>{
  console.log(e)
  if (e.city){
    const fjkd = cityListAll.find(item=>item.hasOwnProperty("zip") && item["zip"] === e.city);
    return fjkd.name
  }else{
    return ""
  }

}
onMounted(() => {
  getList();
});
</script>
<style>
.cell-item{
  width: 85px;
}
</style>
